<template>
  <div class="ad-add">
    <h2 class="title">添加店铺广告</h2>
    <div class="box">
      <div v-loading="loading" class="wrapper">
        <el-form ref="form" label-position="right" label-width="140px">
          <el-form-item class="name" prop="name" label="广告名称：">
            <el-input
              v-model="form.name"
              clearable
              class="name-ipt"
              size="medium"
              maxlength="20"
              placeholder="请输入广告名称"
            />
          </el-form-item>
          <el-form-item prop="type" label="广告位置：">
            <el-select v-model="form.advertiseType" placeholder="选择广告位置" size="medium">
              <el-option label="店铺首页轮播图" value="00600006" />
            </el-select>
          </el-form-item>
          <el-form-item class="upload-box" prop="imagePc" label="广告图片(电脑端)：">
            <el-image
              style="width: 400px; height: 90px"
              :src="qnPath(form.imagePc)"
              fit="fill"
            />
            <image-upload :size="3072" imgname="电脑版广告图片" tip="该图片用于电脑端店铺首页的活动展示，建议尺寸1200PX*270PX" @onSuccess="pcBannerSuc">
              <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
            </image-upload>
          </el-form-item>
          <el-form-item class="upload-box" prop="imageApp" label="广告图片(手机端)：">
            <el-image
              style="width: 300px; height: 100px"
              :src="qnPath(form.imageApp)"
              fit="fill"
            />
            <image-upload :size="3072" imgname="移动版广告图片" tip="该图片用于移动端店铺首页的活动展示，建议尺寸750PX*260PX" @onSuccess="mobileBannerSuc">
              <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
            </image-upload>
          </el-form-item>
          <el-form-item prop="sort" label="广告排序：">
            <el-input
              v-model.number="form.sort"
              class="sort-ipt"
              size="medium"
              placeholder="输入数字即可调整轮播图顺序"
            /> &nbsp;<span class="el-upload__tip">输入数字即可调整轮播图顺序</span>
          </el-form-item>
          <el-form-item prop="linkType" label="链接类型：">
            <el-radio v-model="form.linkType" label="0">商品</el-radio>
            <el-radio v-model="form.linkType" label="1">活动</el-radio>
            <el-radio v-model="form.linkType" label="2">图片</el-radio>
          </el-form-item>
          <!-- 商品 -->
          <el-form-item v-if="form.linkType === '0'" class="pdts" prop="pdtLink">
            <div class="pdts-wrapper">
              <div><el-button type="primary" icon="el-icon-plus" size="medium" plain @click="dialogPdtsVisible = true">添加广告商品</el-button></div>
              <table v-if="selectedPdts.length > 0" class="pdts-selected-table" align="left" border="0" cellpadding="0" cellspacing="0">
                <thead>
                  <tr>
                    <th>商品名称</th>
                    <th>分类</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>销量</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(pdt, index) in selectedPdts" :key="index">
                    <td>
                      <div>
                        <p class="img"><el-image style="width: 80px; height: 80px" :src="qnPath(pdt.image)" fit="fit" /></p>
                        <div class="info">
                          <p class="name">{{ pdt.name }}</p>
                          <p class="id">ID：{{ pdt.id }}</p>
                        </div>
                      </div>
                    </td>
                    <td>{{ pdt.typeValue }}</td>
                    <td>{{ pdt.unitPrice | fixedPrice }}</td>
                    <td>{{ pdt.amount }}</td>
                    <td>{{ pdt.sales }}</td>
                    <td><el-link type="danger" :underline="false" @click="deleteSinglePdt(pdt)">删除</el-link></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form-item>
          <!-- 活动 -->
          <el-form-item v-if="form.linkType === '1'" class="activity" prop="pdtLink">
            <div class="activity-wrapper">
              <div><el-button type="primary" icon="el-icon-plus" size="medium" plain @click="dialogActivityVisible = true">选择活动</el-button></div>
              <div v-if="selectedActivity.id" class="info-box">
                <p class="img"><el-image style="width: 300px; height: 100px" :src="qnPath(selectedActivity.imageWeb)" fit="fit" /></p>
                <div>
                  <p class="name">{{ selectedActivity.name }}</p>
                  <p>活动类型：<span v-if="selectedActivity.type === '02200001'">折扣-{{ selectedActivity.disCount }}折</span></p>
                  <p>开始时间：{{ new Date(selectedActivity.beginTime) | getDate }}至{{ new Date(selectedActivity.finishTime) | getDate }}</p>
                </div>
              </div>
            </div>
          </el-form-item>
          <!-- 图片 -->
          <el-form-item v-if="form.linkType === '2'" class="activity" prop="pdtLink">
            <div class="image-wrapper">
              <div class="pc">
                <image-upload :size="6144" imgname="电脑版广告图片" @onSuccess="imgPCSuc">
                  <el-button type="primary" size="medium" plain>选择图片(电脑端）</el-button>
                </image-upload>
                <p v-if="imgPC" class="img"><img :src="qnPath(imgPC)"></p>
              </div>
              <div class="mobile">
                <image-upload :size="6144" imgname="移动版广告图片" @onSuccess="imgMobileSuc">
                  <el-button type="primary" size="medium" plain>选择图片(手机端）</el-button>
                </image-upload>
                <p v-if="imgMobile" class="img"><img :src="qnPath(imgMobile)"></p>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="status" label="状态：">
            <el-switch v-model="form.status" active-value="00400001" inactive-value="00400002" /> &nbsp;<span>{{ form.status === '00400001' ? '已' : '未' }}开启</span>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="goBack">返 回</el-button>
            <el-button type="primary" @click="submitForm">发布广告</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 商品弹框 -->
      <template>
        <DialogPdts :dialogpdtsvisible="dialogPdtsVisible" :selectedlist="selectedPdts" :shopid="shopInfo.id" :isradio="true" @ok="getSelectedPdts" @goBack="dialogPdtsVisible = false" />
      </template>
      <!-- 活动弹框 -->
      <template>
        <DialogActivity :dialogactivityvisible="dialogActivityVisible" :selectedactivity="selectedActivity" :shopid="shopInfo.id" @ok="getSelectedActivity" @goBack="dialogActivityVisible = false" />
      </template>
    </div>
  </div>
</template>
<script>
import DialogPdts from '../../components/DialogPdts';
import DialogActivity from '../../components/DialogActivity';
import ImageUpload from '@/components/ImagesUpload';
import { add } from '@/api/ad';
import { mapGetters } from 'vuex';
export default {
  name: 'AdAdd',
  components: {
    DialogPdts,
    DialogActivity,
    ImageUpload
  },
  data() {
    return {
      loading: false,
      form: {
        name: '',
        type: null,
        imagePc: 'web/public/init-logo.png',
        imageApp: 'web/public/init-logo.png',
        sort: 1,
        advertiseType: '',
        linkType: '0',
        status: true, // true 开启  false 停用
        detail: {
          referenceId: ''
        }
      },
      imgPC: '',
      imgMobile: '',
      selectedPdts: [],
      selectedActivity: {},
      dialogPdtsVisible: false,
      dialogActivityVisible: false
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  methods: {
    pcBannerSuc(res) {
      this.form.imagePc = res;
    },
    mobileBannerSuc(res) {
      this.form.imageApp = res;
    },
    // 链接类型选择图片
    imgPCSuc(res) {
      this.imgPC = res;
    },
    // 链接类型选择图片
    imgMobileSuc(res) {
      this.imgMobile = res;
    },
    goBack() {
      this.$router.go(-1);
    },
    /**
     * @description 添加
     * @param {Object} data
     * {
     * name: String
     * shopId: String
     * advertiseType: '00600006' 店铺首页轮播图
     * imagePc: pc banner
     * imageApp: app banner
     * sort: String
     * linkType: String 0 pdts  1 ac  2 image
     * status String '00400001' 启用   '00400002'停用
     * advertisementId: String 活动ID
     * detail: [{ // 活动链接类型详情 为空{}：链接类型为图片
     * 		referenceId: String 具体活动或商品的idlist
     * 	}]
     * }
     */
    submitForm() {
      const { name, advertiseType, imagePc, imageApp, sort, linkType } = this.form;
      if (!name) {
        this.$message({
          message: '请输入广告名称',
          type: 'warning'
        });
        return;
      }
      if (!advertiseType) {
        this.$message({
          message: '请选择广告位置',
          type: 'warning'
        });
        return;
      }
      if (imagePc === 'web/public/init-logo.png') {
        this.$message({
          message: '请添加电脑版广告图片',
          type: 'warning'
        });
        return;
      }
      if (imageApp === 'web/public/init-logo.png') {
        this.$message({
          message: '请添加移动版广告图片',
          type: 'warning'
        });
        return;
      }
      var arr = [];
      switch (this.form.linkType) {
        case '0':
          arr.push({ referenceId: this.selectedPdts[0].id });
          if (arr.length === 0) {
            this.$message({
              message: '请添加广告商品',
              type: 'warning'
            });
            return;
          }
          break;
        case '1':
          arr.push({ referenceId: this.selectedActivity.id });
          if (arr.length === 0) {
            this.$message({
              message: '请添加广告活动',
              type: 'warning'
            });
            return;
          }
          break;
        case '2':
          arr.push({ referenceId: `${this.imgPC},${this.imgMobile}` });
          if (arr.length === 0) {
            this.$message({
              message: '请添加广告图片',
              type: 'warning'
            });
            return;
          }
      }
      this.loading = true;
      const shopId = this.shopInfo.id;
      const status = this.form.status ? '00400001' : '00400002';
      new Promise((resolve, reject) => {
        add({ shopId, name, advertiseType, imagePc, imageApp, sort, linkType, status, detail: arr }).then(res => {
          this.loading = false;
          this.$message({
            message: '添加广告成功！',
            type: 'success'
          });
          this.form = {
            name: '',
            type: null,
            imagePc: 'web/public/init-logo.png',
            imageApp: 'web/public/init-logo.png',
            sort: 1,
            advertiseType: '',
            linkType: '0',
            status: true, // true 开启  false 停用
            detail: {
              referenceId: ''
            }
          };
          this.imgPC = '';
          this.imgMobile = '';
          this.selectedPdts = [];
          this.selectedActivity = {};
          setTimeout(() => {
            this.$router.push({ name: 'AdShop', query: { reload: true }});
          }, 1000);
          resolve(res);
        }).catch(err => {
          this.loading = false;
          reject(err);
        });
      });
    },
    getSelectedPdts(list) {
      this.selectedPdts = list;
      this.dialogPdtsVisible = false;
    },
    // 删除已经选中的活动商品
    deleteSinglePdt(pdt) {
      this.selectedPdts.splice(this.selectedPdts.indexOf(pdt), 1);
    },
    getSelectedActivity(ac) {
      this.selectedActivity = ac;
      this.dialogActivityVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.ad-add {
	font-size: $fontSizeBase;
	background-color: #fff;
	p{
		margin: 0
	}
}
@import '@/styles/shop-activity-add.scss';
</style>
